<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="//unpkg.com/vue/dist/vue.js"></script>
</script>
<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_2582853_f2xs1b26t5.css">
</head>
<style>
    @import url("//unpkg.com/element-ui@2.15.3/lib/theme-chalk/index.css");
    ul {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
    }
    .fontli {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
        margin-top: 12px;
        width: 170px;
        height: 100px;
    }
    ul>li>span {
        display: inline-block;
       font-size: 10px;
    }
    ul>li:hover {
        cursor: pointer;
    }
    p {
        margin: 0;
    }
    .center {
        transform: translateX(150px);
    }
</style>
<body>
    <div id="app">
        <el-container>
            <el-aside width="200px">Aside</el-aside>
            <el-container>
              <el-header>Header</el-header>
              <el-main>
                <ul>
                    <li class="fontli" v-for='(item,index) in val.list' v:key='index' > 
                        <span style="font-size: 50px;" class="icon iconfont" :class='item'></span>
                        <p>iconfont</p>
                        <p>{{item}}</p>
                    </li>
                </ul>

                <el-pagination
                class="center"
                background
                layout="prev, pager, next"
                @prev-click='prevClick'
                @next-click='nextClick'
                @current-change='currentClick'
                :total="30">
              </el-pagination>
              </el-main>
            </el-container>
          </el-container>
      
        </div>
</body>
<script>
   const vue =  new Vue({
       data() {
           return {
               data:[   
                    {
                    pageSize:30,
                    pageIndex:0,
                    list:['icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open',
                    'icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open',
                    'icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open',
                    'icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open',
                    'icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open',
                    'icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open',
                    'icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open',
                    'icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open',
                    'icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open',]
                   },
                   {
                    pageSize:30,
                    pageIndex:1,
                    list:['icon-sousuo','icon-sousuo','icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open',
                    'icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open',
                    'icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open',
                    'icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open',
                    'icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open',
                    'icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open',
                    'icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open',
                    'icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open',
                    'icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open',]
                   },
                   {
                    pageSize:30,
                    pageIndex:2,
                    list:['icon-ditu-china','icon-ditu-china','icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open',
                    'icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open',
                    'icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open',
                    'icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open',
                    'icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open',
                    'icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open',
                    'icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open',
                    'icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open',
                    'icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open',]
                   }
                   ],

               
                 
                   
               
           
           val:{
                    pageSize:30,
                    pageIndex:0,
                    list:['icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open',
                    'icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open',
                    'icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open',
                    'icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open',
                    'icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open',
                    'icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open',
                    'icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open',
                    'icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open',
                    'icon-Book-Open','icon-Book-Open','icon-Book-Open','icon-Book-Open',]
                   },
           }
       },
       methods:{
           prevClick(e) {
               console.log(e)
               this.val = this.data[e-1]
           },
           nextClick(e) {
            console.log(e)
            this.val = this.data[e-1]
           },
           currentClick(e) {
            console.log(e)
            this.val = this.data[e-1]
           }
       }
   }).$mount('#app')
</script>
</html>